<!-- 完成，等待测试 -->
<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>学生管理</el-breadcrumb-item>
      <el-breadcrumb-item>添加学生</el-breadcrumb-item>
    </el-breadcrumb>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="学籍编号" prop="studentId">
    <el-input v-model="ruleForm.studentId"></el-input>
  </el-form-item>
  <el-form-item label="学生姓名" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
  <el-form-item label="学生性别" prop="sex">
    <el-radio-group v-model="ruleForm.sex">
      <el-radio label="男">男</el-radio>
      <el-radio label="女">女</el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item label="学生年龄" prop="age">
    <el-input v-model.number="ruleForm.age"></el-input>
  </el-form-item>
  <el-form-item label="学生班级" prop="classId">
    <el-input v-model="ruleForm.classId"></el-input>
  </el-form-item>
  <el-form-item label="学生学院" prop="collegeId">
    <el-input v-model="ruleForm.collegeId"></el-input>
  </el-form-item>
  <el-form-item label="密码" prop="password">
    <el-input v-model="ruleForm.password"></el-input>
  </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >立即添加</el-button
        >
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "InsertStudentInfo",
  data() {
    return {
      title: "添加学生",
      ruleForm: {studentId:'',sex:'',name:'',age:'',collegeId:'',classId:'',password:''},
      rules: {
        studentId: [
          { required: true, message: "请填写所添加学生的学籍编号" },
          //   { length:11 , message: "长度在 3 到 5 个字符" },
        ],
        name: [{ required: true, message: "请填写学生姓名" }],
        sex: [{ required: true, message: "请选择学生性别" }],
        age: [{ required: true, message: "请填写学生年龄" }],
        classId: [{ required: true, message: "请填写学生班级" }],
        collegeId:[{ required: true, message: "请填写学生学院" }],
        password:[{ required: true, message: "请填写学生的密码" },{ length:11 , message: "长度在 8 到 11 个字符" }],
  
      },
    };
  },
  created(){
    if(localStorage.getItem("type") !== 'admin'){this.$router.push(`/login`);this.$message.error('权限不够');}
  },
  methods: {
    //添加学生信息
    async insertStudentInfo() {
    // JSON化
    const config = {
      headers: {
        'Content-Type':'application/json',
        'token':`${localStorage.getItem("token")}`
      }
    };
    try {
      const { data: res } = await this.$http.post(`api/admin/student/insert`,JSON.stringify(this.ruleForm),config);
      if (res.status !== 500) {
        this.$message.success('成功添加学生信息');
        // 重新调用获取表格的代码
      } else {
        this.$message.error('添加失败');
      }
    } catch (error) {
      // Handle request error
      console.error('Request Error:', error);
      this.$message.error('添加失败');
  }
    },
    //提交表单信息
    submitForm(ruleForm) {
      this.$refs[ruleForm].validate((valid) => {
        if (valid) {
          this.insertStudentInfo();
        }
        else{
          this.$message.error('请将信息填写完整');
        }
      });
    },
    // 重置清空表单信息
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style lang="less" scoped>
.el-breadcrumb {
  padding-bottom: 10px;
}
.el-input {
  width: 40%;
}
/deep/ .el-textarea__inner {
  width: 40%;
  line-height: 3;
}
.el-form-item {
  margin: 18px 0 !important;
}
</style>
